<template>
	<view class="invoice-header">
		<u-radio-group v-model="checked" v-if="list.length">
			<view class="list">
				<view
					v-for="item in list"
					:key="item.id"
					class="item"
				>
					<view class="flex-align">
						<u-avatar width="72rpx" height="72rpx"></u-avatar>
						<view style="margin-left: 22rpx;">{{ item.name }}</view>
					</view>
					
					<view class="flex-between" style="margin-top: 56rpx;">
						<view :class="{ checked: item.id === checked }">
							<u-radio
								label="设为默认"
								:name="item.id"
								shape="circle"
							/>
						</view>
						
						<view class="flex-align" style="color: #BEBEBE; font-size: 26rpx;">
							<view @click="edit(item)">编辑</view>
							<view @click="del(item)" style="margin-left: 40rpx;">删除</view>
						</view>
					</view>
				</view>
			</view>
		</u-radio-group>
		
		<view v-else style="margin-top: 220rpx;">
			<u-text text="暂无发票抬头" align="center" color="#BEBEBE" size="30rpx"></u-text>
		</view>
		
		<view class="bottom-add-btn">
			<u-button text="添加抬头" shape="circle" @click="add" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
		
		<ModalConfirm v-model="showModalConfirm" content="确认要删除这个发票抬头吗?" @confirm="confirm"></ModalConfirm>
	</view>
</template>

<script>
import ModalConfirm from '../../components/modal-confirm/modal-confirm';
import { serialize } from '@/utils/util.js';	
	
export default {
	components: {
		ModalConfirm
	},
	data() {
		return {
			showModalConfirm: false,
			checked: 1,
			list: [
				{
					id: 1,
					name: '绍兴奥体',
				},
				{
					id: 2,
					name: '绍兴奥体',
				}
			]
		}
	},
	methods: {
		edit(item) {
			const obj = {
				...item,
				defaultId: this.checked
			};
			uni.navigateTo({
				url: '/page_venues/pages/invoice-header/add/add?' + serialize(obj)
			});
		},
		del(item) {
			this.showModalConfirm = true;
		},
		confirm() {
			
		},
		add() {
			uni.navigateTo({
				url: '/page_venues/pages/invoice-header/add/add',
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.invoice-header {
	min-height: 100vh;
	background-color: #f7f7f7;
	padding: 30rpx;
	padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
	
	.list {
		width: 100%;
		
		.item {
			border-radius: 20rpx;
			background-color: #fff;
			padding: 30rpx;
			
			& + .item {
				margin-top: 30rpx;
			}
			
			/deep/.u-radio {
				> text {
					color: #999 !important;
				}
			}
			
			/deep/.checked {
				.u-radio {
					> text {
						color: #2F75FA !important;
					}
				}
			}
		}
	}
}
</style>
